<template>
  <view id="buytea">
    <image src="@/static/index/bgimg.jpg" class="bgimg" mode="widthFix" />
    <view class="helpbox">
      <view class="helpnum"><text class="num">{{ pgList }}</text>/100</view>
      <view class="helpplan">
        <progress :percent="pgList" backgroundColor="#FDEBD5" activeColor="#FEDC60" stroke-width="25" />
      </view>
      <view class="helptext">每邀3位新用户点亮，得买茶送包券1张<br />新用户可得30元权益券包</view>
      <button class="helpbut">立即找好友助力
        <image src="@/static/index/rightred.png" class="rightred" mode="widthFix" />
      </button>
    </view>
    <view class="myaward">
      <image src="@/static/index/label.png" class="label" mode="widthFix" />
      <view class="awardtit">我的奖励</view>
      <view class="awardbody">
        <view class="awardson">
          <view class="atit">{{ pgList }}</view>
          <view class="atext">已成功邀请（位）</view>
        </view>
        <view class="line"></view>
        <view class="awardson">
          <view class="atit">{{ pgList }}</view>
          <view class="atext">已获得奖励（次）</view>
        </view>
      </view>
    </view>

    <view class="myaward">
      <image src="@/static/index/label.png" class="label" mode="widthFix" />
      <view class="awardtit">好友奖励</view>
      <view class="ftext">新用户助力即享30元权益包，助力完也可参加活动</view>
      <view class="fbody">
        <view class="fson" v-for="(item,i) in fsonlist" :key="i">
          <view class="sonnum">{{ item.num }}元</view>
          <view style="height: 80%;width: 2rpx;border-right: 2rpx #fff dashed;"></view>
          <view class="sontit">{{item.tit}}</view>
        </view>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref } from "vue";


const pgList = ref(30);
const  fsonlist = ref([{
  num:5,
  tit:'现金券1张'
},{
  num:5,
  tit:'外卖券1张'
},{
  num:20,
  tit:'酒屋券1张'
}])
</script>

<style lang="scss">
#buytea {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #edc4d2;
  .bgimg {
    width: 100%;
  }
  .helpbox{
    width: 94%;
    aspect-ratio: 1.8;
    margin: auto;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    .helpnum{
      width: 80%;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .num{
        font-size: 30rpx;
        color: #D9595A;
        margin-right: 20rpx;
      }
    }
    .helpplan{
      width: 80%;
      margin: auto;
      margin-top: 20rpx;
    }
    .helptext{
      width: 66%;
      margin: auto;
      margin-top: 10rpx;
      font-size: 24rpx;
      text-align: center;
      color: #D9595A;
    }
    .helpbut{
      width: 70%;
      margin-top: 20rpx;
      background-color: #FFEA99;
      color: #D9595A;
      border-radius: 50rpx;
      .rightred{
        width: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
  .myaward{
    width: 94%;
    // aspect-ratio: 3;
    border-radius: 16rpx;
    background-color: #fff;
    margin: auto;
    margin-top: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    position: relative;
    .label{
      width: 40%;
      position: absolute;
      top: -5%;
      left: 50%;
      transform: translate(-50%,-50%);
      position: relative;
    }
    .awardtit{
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
    }
    .awardbody{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .awardson{
        width: 48%;
        text-align: center;
        .atit{
          color: #D9595A;
        }
        .atext{
          font-size: 26rpx;
          color: #919195;
        }
      }
      .line{
        height: 40rpx;
        width: 2rpx;
        background-color: #919195;
      }
    }
    .ftext{
      font-size: 28rpx;
      color: #D9595A;
    }
    .fbody{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      .fson{
        width: 30%;
        height: 100rpx;
        background-image: url('../../static/index/redquan.png');
        padding:0 13rpx ;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        .sonnum{
          font-size: 23rpx;
        }
        .sontit{
          font-size: 23rpx;
        }
      }
    }
  }
}
</style>
